<template>
    <div>
        <ul class="seachform clearfix">
            <li>
                <span>商家名称</span>
                <div class="input-width">
                    <el-input placeholder=" 订单编号" v-model="params.shopname"></el-input>
                </div>

            </li>

            <li>
                <span>活动名称</span>
                <div class="input-width">
                    <el-input v-model="params.actname" style="display: inline-block"></el-input>
                </div>
            </li>
            <li class="default">
                <span>活动类型</span>
                <div class="input-width">
                    <el-select v-model="params.acttype" placeholder="------">
                        <el-option v-for="(item,index) in  acttypeOption" :label="item" :value="index+1" :key="index"></el-option>
                    </el-select>
                </div>
            </li>
            <li class="default">
                <span>代理商</span>
                <div class="input-width">
                    <el-select v-model="params.agent" placeholder="------">
                        <el-option label="支付宝" value="1"></el-option>
                        <el-option label="微信" value="2"></el-option>
                        <el-option label="钱包" value="3"></el-option>
                        <el-option label="银行卡" value="4"></el-option>
                    </el-select>
                </div>
            </li>

            <li style="float: right; margin-right: 17px;">
                <el-button  @click="restParams()">清空搜索框</el-button>
                <el-button type="primary" :loading="$store.state.isloading" @click="onSubmit">{{$store.state.isloading?'搜索中...':'搜索'}}</el-button>
            </li>
        </ul>
        <div class="main clearfix">
            <div class="table-wrap">
                <el-table :data="tableData.orders"  stripe style="width: 100%" :empty-text="emptyText">
                    <el-table-column type="index" label="#" width="40" align="center"></el-table-column>
                    <el-table-column prop="orderNo" label="活动名称" width="140" align="center"></el-table-column>
                    <el-table-column prop="fromAddress" label="活动类型 " width="120" align="center"></el-table-column>
                    <el-table-column prop="fromAddress" label="商家名称 " width="140" align="center"></el-table-column>
                    <el-table-column prop="fromAddress" label="代理商名称" width="120" align="center"></el-table-column>
                    <el-table-column prop="fromAddress" label="活动开始时间" width="180" align="center"></el-table-column>
                    <el-table-column prop="fromAddress" label="活动结束时间" width="180" align="center"></el-table-column>
                    <el-table-column prop="fromAddress" label="添加时间" width="180" align="center"></el-table-column>
                    <el-table-column fixed="right" label="操作" min-width="120" align="right" >
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="mini">查看/修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 复制 el-table v-loading  v-loading无法快速响应 所有自定义 -->
                <div class="directives-loading" v-show="$store.state.isloading">
                    <div class="el-loading-spinner">
                        <svg viewBox="25 25 50 50" class="circular">
                            <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page.sync="params.page"
                               :page-sizes="[10, 20, 30, 40]" background layout="total,sizes, prev, pager, next, jumper"
                               :total="tableData.total">
                </el-pagination>
            </div>
            <el-dialog title="订单信息" v-dialogDrag :visible.sync="dialogTableVisible" width="1000px"
                       :modal="false" :close-on-click-modal="false">
                <orderDetails :curOrderlist="curOrderlist"></orderDetails>
            </el-dialog>
        </div>

    </div>
</template>

<script>

    export default {

        data() {
            return {
                websock: null,             //websock
                datePicker:null,
                curOrderlist:[],          //修改 选择数据
                acttypeOption:['满减','打折','赠品','特价','满减免运费'],
                params: {               //查询数据
                    page: 1,
                    size: 10,
                    shopname:'',
                    actname:'',
                    acttype:'',
                    agent:''
                },
                dialogTableVisible: false,
                tablehead: 'tablehead',
                tableData: {},              //表单数据
                emptyText:''                //
            }
        },
        methods: {
            handleClick(row){                //查看/修改订单操作
                this.dialogTableVisible = !this.dialogTableVisible
                this.$set(this.$data,'curOrderlist',row)
            },
            handleSizeChange(size) {          //设置分页数量
                this.params.size = size
                this.gettablist()
            },
            handleCurrentChange(page) {         //切换分页
                this.params.page = page
                this.gettablist()
            },
            gettablist(){ //获取订单数据

                this.emptyText = ''
                this.$http.get('/api/order/PageList?'+this.qs.stringify(this.params))
                    .then(res => {
                        const datas = res.data;
                        if(datas.success){
                            this.$set(this.$data, 'tableData', datas.data)
                        }
                    })
                    .catch(err => {   //报错信息 已被自定义 见 main.js axios 拦截器

                        if(!err.Cancel){
                            console.log(err)
                            this.emptyText = '数据加载失败！'
                        }
                    })

            },
            onSubmit() {    //提交查询
                this.gettablist()
            },
            restParams(){  //清空搜索框
                this.paramsshopname ='',
                    this.paramsactname = '',
                    this.paramsacttype = '',
                    this.paramsagent = ''
            }
        },

        mounted() {

        },
        created(){

        }
    }
</script>

<style scoped>
    .el-dialog__header{
        background-color: red;
    }
    .main {
        padding: 15px 10px;
        background: #fff;
    }

    .pagination {
        float: right;
        padding-top: 20px;
        background: #fff;
    }

    .el-table__header-wrapper {
        border-bottom: 2px solid red;
    }

    .tablehead {
        background: red;
        font-size: 28px;
        font-weight: bold;

    }

    .seachform {
        padding: 15px 10px;
        margin-bottom: 10px;
        background: #fff;
        clear: both;
    }

    .seachform li {
        float: left;
        margin: 5px 15px 5px 0px;
        height: 32px;
    }

    .seachform li span {
        margin-right: 15px;
    }

    .seachform li .input-width {
        display: inline-block;
        width: 180px;
    }

    .el-date-editor {
        width: 240px;
    }

    .el-input--mini .el-input__inner {
        border: 1px solid red !important;
    }

    .el-form-item__label {
        width: 120px !important;
    }

    .my-autocomplete li {
        line-height: normal;
        padding: 7px;
    }

    .my-autocomplete .name {
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .my-autocomplete .addr {
        font-size: 12px;
        color: #b4b4b4;
    }

    .my-autocomplete .highlighted .addr {
        color: #ddd;
    }

    .tablehead {
        border-bottom: 2px solid red !important;
    }
    .table-wrap{
        position: relative;
    }
    .directives-loading{
        position: absolute;
        z-index: 2000;
        background-color: rgba(255,255,255,.9);
        margin: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        /* -webkit-transition: opacity .3s;
         transition: opacity .3s;*/
    }
    .el-loading-spinner .circular {
        height: 42px;
        width: 42px;
        -webkit-animation: loading-rotate 2s linear infinite;
        animation: loading-rotate 2s linear infinite;
    }
</style>